@extends('layouts.dashboard')

@section('header')
    <h3 class="text-3xl font-medium text-gray-700">Home</h3>
@endsection

@section('content')
    <div class="mt-6">
        <div class="bg-gray-100 rounded-3xl p-6 grid grid-cols-[3.5rem_1fr] gap-4">
            <div class="rounded-full size-14 bg-red-300 flex items-center justify-center text-white">
                {{ auth()->user()->name[0] }}
            </div>
            <a href="/notes/create" class="px-6 py-2 rounded-full bg-gray-200 flex items-center w-full">What's on your mind,
                {{ auth()->user()->name }}?</a>
        </div>

        @if (!$notes->count())
            <div class="bg-gray-100 rounded-3xl p-6 flex flex-col justify-center items-center mt-10">
                <img src="" class="size-36 mb-2" alt="">
                <p class="text-gray-500">No notes found.</p>
            </div>
        @else
            <div class="grid gap-5 mt-10">
                @foreach ($notes as $note)
                    <div class="bg-gray-100 rounded-3xl p-6 grid grid-cols-[3.5rem_1fr] gap-4">
                        <div class="rounded-full size-14 flex items-center justify-center text-white {{ ($note->user->id === auth()->id()) ? 'bg-red-300': 'bg-blue-300' }}">
                            {{ $note->user->name[0] }}
                        </div>
                        <div>
                            <h2 class="text-xl mb-1">{{ $note['title'] }}</h2>
                            <p>{{ $note['note'] }}</p>
                            <small>{{ tick($note['created_at'])->fromNow() }}</small>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection
